<!--文件列表-->
<template>
  <div class="example">
    <zz-fileList
      @handle="clickHandle"
      :auth = true
      :isDirectory = true
      :check= true
      :isPreview = true
      :isDown = true
      :isReset = true
      :delAll = true
      :checkAll = true
      :resetFolder="resetFolder"
      :allFolder = false
      :smallWidth = true
      :items="DataList"
    ></zz-fileList>
    <div class="tableClass mt20">
      <table cellspacing="0">
        <tr>
          <th>1) 调用文件组件</th>
        </tr>
        <tr>
          <td><pre>{{explameCall}}</pre></td>
        </tr>
        <tr>
          <th>2) items参数</th>
        </tr>
        <tr>
          <td><pre>{{explameList}}</pre></td>
        </tr>
        <tr>
          <th>3) 写入到methods方法</th>
        </tr>
        <tr>
          <td><pre>{{explameMethods}}</pre></td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
  export default {
    name: '',
    data () {
      return {
        tableRemark: '这是提示语',
        resetFolder: 0,
        DataList: [
          {
            type: 4,
            docType: 1,
            docId: 1,
            fileName: '文件名字',
            parentId: 1,
            mname: '上传人名字',
            time: 2346546546564,
            checked: false,
            url: '333.txt'
          }
        ],
        explameCall: `<zz-fileList
          @handle="clickHandle" 回调函数
          :resetFolder="resetFolder" 需不需要 重置目录 只要改变resetFolder就行 下有示例
          :auth = true 是否开启权限 默认关闭
          :isDirectory = true 是否二级目录 默认关闭
          :check= true 是否开启复选框 默认关闭
          :cName= true 是否显示创建人 默认开启
          :isMove= true 是否显示移动按钮 默认关闭
          :isDel= true 是否显示删除按钮 默认关闭
          :isPreview = true  是否开启预览 默认关闭
          :isDown = true 是否开启下载 默认关闭
          :isReset = true 是否开启重命名 默认打开
          :delAll = true 是否开启顶部栏删除按钮 默认打开
          :checkAll = true 是否开启顶部栏选择全部按钮  默认打开
          :items="DataList" 需要显示的数据 数组
        ></zz-fileList>`,

        explameList: `items: [
          {
            /**
            * 文件类型 type
            * 1: 图片
            * 2：音频
            * 3：视频
            * 4：普通文件
            * 如果服务端传的参数不一样 需要转换一下 方法见下方
            **/
            type: file.type,

            /**
            * 文档类型 docType
            * 1: 文件
            * 2：文件夹
            * 如果服务端传的参数不一样 需要转换一下 方法见下方
            **/
            docType: file.docType,

            /**
            * 文档Id docId
            * 1: 文件
            * 2：文件夹
            * 如果服务端传的参数不一样 需要转换一下 方法见下方
            **/
            docId: file.docId,

            /**
            * 文档名字 fileName
            * 如果服务端传的参数不一样 需要转换一下 方法见下方
            **/
            fileName: file.fileName,

            /**
            * 父文件夹Id parentId
            * 如果服务端传的参数不一样 需要转换一下 方法见下方
            **/
            parentId: file.parentId,

            /**
            * 上传是时间 time
            * 如果服务端传的参数不一样 需要转换一下 方法见下方
            **/
            time: file.time,

            /**
            * 是否需要默认选中复选框 checked
            * checked: true 默认选中
            * checked: false 默认不选中
            **/
            checked: file.checked,
          }
        ]`,
        explameMethods:
          `clickHandle (item) {
            switch (item.handleType) {
              // 编辑
              case 1:
                this.editFile(item)
                break
              // 删除目录
              case 2:
                this.delFile(item)
                break
              // 重命名
              case 3:
                this.showRename(item)
                break
              // 权限设置
              case 4:
                this.authFile(item)
                break
              // 移动文件
              case 5:
                this.moveFile(item)
                break
              // 批量删除文件
              case 6:
                this.moveFiles(item)
                break
              // 进入文件夹
              case 7:
                // 是否跳到第一级目录
                if (item.home) {
                  this.parent_id = ''
                } else {
                  this.parent_id = item.docId
                }
                // 是否点击目录
                if (item.isFolder) {
                  this.parent_id = item.parentId
                }
                this.query()
                break
              // 上移
              case 8:
                this.moveUp(item)
                break
              // 下移
              case 9:
                this.moveDown(item)
                break
            }
          }
        },
        resetFolderFun () {
          this.resetFolder++
        }`
      }
    },
    methods: {
      clickHandle () {
      },
      resetFolderFun () {
        this.resetFolder++
      }
    }
  }
</script>
<style lang="scss" scoped>
  .example{
    padding: 20px;
    .example-left{
      float: left;
      width: 68%;
    }
    .example-right{
      float: right;
      width: 28%;
      background: #fff;
      padding: 20px;
    }
  }
</style>
